function applyComment(propertyKey, propertyValue, _loadComment, _startComment, _containHeader) {
	var html = ''
			+ '<table width="100%" border="0" cellpadding="0" cellspacing="0">';
	if(_containHeader == true) {
		html = html + ''
				+ '<thead>'
				+ '  <tr>'
				+ '    <td class="bottomborder"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="closeuicontainer">'
				+ '      <tr>'
				+ '        <td><strong>' + label_comment_title + '</strong></td>'
				+ '        <td class="alignright valigntop closeuibutton" width="15px"><div id="_btnClose" style="display: none;" class="closeuiicon"  onclick="$(\'.comment_component\').hide();" ></div></td>'
				+ '      </tr>'
				+ '    </table></td>';
        		+ '  </tr>'
        		+ '</thead>';
	}
	html = html + ''
			+ '<input type="hidden" value="' + propertyKey + '" id="_comment_propertykey"/>'
			+ '<input type="hidden" value="' + propertyValue + '" id="_comment_propertyvalue"/>'
			+ '  <tr>'
		    + '    <td width="100%" class="alignleft"><table bgcolor="#E4EAF6" width="100%" border="0" cellpadding="2" cellspacing="0" >'
			+ '      <tbody class="tborder" bgcolor="#E4EAF6" id="_tblComment"></tbody>'
			+ '      <tfoot class="tborder" bgcolor="#E4EAF6" id="_tblCommentMore"></tfoot>'
			+ '    </table></td>'
			+ '  </tr>'
			+ '<tfoot>'
			+ '  <tr class="tr">'
			+ '    <td align="left" valign="middle" width="100%"><input type="text" style="width: 98%;" title="' + message_comment_input + '" placeholder="' + message_comment_input + '" id="_txtComment" onkeyup="if (event.keyCode == 13) {comment(this); $(this).val(\'\');}"/> </td>'
			+ '  </tr>'
			+ '</tfoot>'
			+ '</table>';
	$('.comment_component').hide();
	$('.comment_component').html(html);
	if(_loadComment == true) {
		loadComment();
	}
	if(_startComment == true) {
		doStartComment();
	}
	$('.closeuicontainer').mouseenter(function(){
		$(this).find('[id=_btnClose]').show();
	}).mouseleave(function(){
		$(this).find('[id=_btnClose]').hide();
	});
}

function doStartComment() {
	$('#_txtComment').focus();
}

function doComment(propertyKey, propertyValue) {
	applyComment(propertyKey, propertyValue, true, true, true);
	var hscroll = (document.all ? document.scrollLeft : window.pageXOffset);
	var vscroll = (document.all ? document.scrollTop : window.pageYOffset);
	$('.comment_component').css('top', vscroll + 10);
}

function loadComment(propertyKey, propertyValue, append, indexPage) {
	if(propertyKey == null || propertyKey == undefined || propertyKey == '') {
		propertyKey = $('#_comment_propertykey').val();
	}
	if(propertyValue == null || propertyValue == undefined || propertyValue == '') {
		propertyValue = $('#_comment_propertyvalue').val();
	}
	$.ajax({
		url : LOADCOMMENT_URL,
		type: 'POST',
		data: {'commentInfo.propertyKey': propertyKey, 
			'commentInfo.propertyValue': propertyValue,
			'pagingInfo.indexPage': append?indexPage:0},
		dataType : 'json',
		iframe : true,
		success : function(data) {
			loadCommentSuccess(data, append);
		}
	});
}

function loadCommentSuccess(data, append) {
	var commentInfoList = data.commentInfoList;
	var s = "";
	if(commentInfoList != null && commentInfoList.length > 0) {
		for(var i = 0; i < commentInfoList.length; i++) {
			var commentInfo = commentInfoList[i];
			if(commentInfo.customerInfo == null) {
				continue;
			}
			var imagePath = getImage(commentInfo.customerInfo.displayImage);
			var customerName = commentInfo.customerInfo.displayName;
			/*if(commentInfo.customerInfo.customerName != null && commentInfo.customerInfo.customerName != '') {
				customerName = commentInfo.customerInfo.customerName;
			} else if(commentInfo.customerInfo.emailAddress != null && commentInfo.customerInfo.emailAddress != '') {
				customerName = commentInfo.customerInfo.emailAddress
			}*/
			var inputDate = " ";
			if(commentInfo.inputDate != null) {
				inputDate = commentInfo.inputDateStr;
			}
			s = s + '<tr class="tr">'
			      + '  <td width="100%" class="topbordergray"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#E4EAF6" class="closeuicontainer">'
			      + '    <tr>'
			      + '      <td width="40" class="alignleft valigntop" rowspan="2"><img src="' + imagePath + '" alt="' + NO_PICTURE_ALT + '" width="30" height="30" /></td>'
			      + '      <td><strong><a href="' + BET_LIST_RECENTBET_URL + '?betInfo.customerId=' + commentInfo.customerInfo.customerId + '">' + customerName + '</a></strong> ' + commentInfo.description + '</td>'
			      + '      <td class="alignright valigntop closeuibutton" width="15px"><div id="_btnClose" style="display: none;" class="closeuiicon"  onclick="removeComment(\''+ commentInfo.commentId + '\', \'' + parent + '\');" ></div></td>'
			      + '    </tr>'
			      + '    <tr>  '
			      + '      <td class="alignleft">' + inputDate + '</td>'
			      + '      <td class="alignright"></td>'
			      + '    </tr>'
			      + '  </table></td>'
			      + '</tr>';
		}
	}
	var pagingInfo = data.pagingInfo;
	if(pagingInfo && pagingInfo.hasNextPage == true) {
		var more = label_comment_more.replace('___', '' + pagingInfo.remainingItems);
		$('#_tblCommentMore').html('' 
				+ '<tr>'
				+ '  <td width="100%" class="topbordergray alignleft"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#E4EAF6">'
				+ '    <tr>'
				+ '      <td class="commentuiicon"></td>'
				+ '      <td width="5"></td>'
				+ '      <td class="alignleft"><a href="javascript: loadComment(null, null, true, ' + (pagingInfo.indexPage + 1) +');">' + more + '</a></td>'
				+ '    </tr>'
				+ '  </table></td>'
				+ '</tr>');
	} else {
		$('#_tblCommentMore').html('');
	}
	if(append) {
		$('#_tblComment').append(s);
	} else {
		$('#_tblComment').html(s);
	}		
	$('.comment_component').show();
	$('.closeuicontainer').mouseenter(function(){
		$(this).find('[id=_btnClose]').show();
	}).mouseleave(function(){
		$(this).find('[id=_btnClose]').hide();
	});
}

function comment(target, propertyKey, propertyValue) {
	if(propertyKey == null || propertyKey == undefined || propertyKey == '') {
		propertyKey = $('#_comment_propertykey').val();
	}
	if(propertyValue == null || propertyValue == undefined || propertyValue == '') {
		var propertyValue = $('#_comment_propertyvalue').val();
	}
	$.ajax({
		url : COMMENT_URL,
		type: 'POST',
		data: {'commentInfo.propertyKey': propertyKey, 'commentInfo.propertyValue': propertyValue, 'commentInfo.description': $(target).val()},
		dataType : 'json',
		iframe : true,
		success : function(data) {
			if(data.errorFlag != 0) {
				alert(data.errorMessage);
				return;
			}
			commentSuccess(data);
		}
	});
}

function commentSuccess(data) {
	loadComment(data.commentInfo.propertyKey, data.commentInfo.propertyValue);
}

function removeComment(commentId) {
	$.ajax({
		url : REMOVECOMMENT_URL,
		type: 'POST',
		data: {'commentInfo.commentId': commentId},
		dataType : 'json',
		iframe : true,
		success : function(data) {
			if(data.errorFlag != 0) {
				alert(data.errorMessage);
				return;
			}
			removeCommentSuccess(data);
		}
	});
}

function removeCommentSuccess(data) {
	loadComment(data.commentInfo.propertyKey, data.commentInfo.propertyValue);
}